<template>
	<div>
    <el-dialog title="vs波形选择"  :visible.sync="imageDialog" center width="500px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">
      <div class="demo-image__preview"  >
<!--        <el-image style="margin-right:5px;width: 100px;height: 100px"  v-for="(item,i) in fileList" :src="item.url" :key="i"  :preview-src-list="[item.url]">-->
<!--        </el-image>-->
<!--        <el-upload-->
<!--            class="upload-demo"-->
<!--            action="https://dnzq.s3.ap-southeast-1.amazonaws.com/"-->
<!--            :on-preview="handlePreview"-->
<!--            :on-remove="handleRemove"-->
<!--            :file-list="fileList"-->
<!--            list-type="picture">-->
<!--        </el-upload>-->
        <div>
          <el-button size="small" type="primary" @click="selectImage()">确认选择</el-button>
        </div>
      </div>
    </el-dialog>
		<el-dialog :title="$t('action.add')" width="70%" class="icon-dialog" :visible.sync="show" @open="open" :before-close="closeForm" append-to-body>
			<el-form :size="size" ref="form" :model="form" :rules="rules" :label-width="$store.getters.device !== 'mobile'?'16%':'90px'">
 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fnumber')" prop="fnumber">
							<el-input v-model="form.fnumber" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Vswave_fnumber')})">
							</el-input>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fname')" prop="fname">
							<el-input v-model="form.fname" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Vswave_fname')})">
							</el-input>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fworkorder')" prop="fworkorder">
							<el-input v-model="form.fworkorder" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Vswave_fworkorder')})">
							</el-input>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fvcom')" prop="fvcom">
							<el-input v-model="form.fvcom" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Vswave_fvcom')})">
							</el-input>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fpicture')" prop="fpicture">
<!--						<div>-->
<!--              <el-button type="primary" @click="changeImage" >选择图片</el-button>-->
<!--            </div>-->
              <el-select filterable remote :remote-method="e => getFileList(e)"  v-model="form.fpicture"  placeholder="请选择图片" clearable>
                <el-option v-for="item in fileList" :key="item.fid" :label="item.fid + ':' + item.fileName" :value="item.fid"></el-option>
              </el-select>
<!--              <el-image v-if="chooseUrl !== ''" style="margin-right:5px"   class="table_list_pic" :src="chooseUrl" :key="i"  :preview-src-list="[chooseUrl]"></el-image>*/-->
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fnote')" prop="fnote">
							<el-input v-model="form.fnote" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Vswave_fnote')})">
							</el-input>
						</el-form-item>
					</el-col>
				 </el-row>
				</el-form>
      <div >
        <el-button size="mini" type="primary" @click = addnewrow()><i class="el-icon-edit" />添加</el-button>
<!--        <el-button size="mini" type="danger"><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>-->
      </div>
      <el-table :data ="list" style="width: 100%">
        <el-table-column type="index" width="50">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column prop="femperature" align="center" label="温度" width="120">
          <template slot-scope="scope">
            <el-select  v-model="scope.row.femperature" clearable  placeholder="请选择温度"  size="small" >
              <el-option v-for="item in wendulist" :key="item.wenduNumber" :label="item.wenduName" :value="item.wenduNumber"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="fdianya" align="center" label="电压范围" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fdianya"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fboxing" align="center" label="波形" width="120">
          <template slot-scope="scope" >
           <el-select filterable remote :remote-method="e => getBoXingList(e)"  v-model="scope.row.fboxing"  placeholder="请输入波形编码或者名称" clearable>
             <el-option v-for="item in boXingList" :key="item.bxbillno" :label="item.bxbillno + ':' + item.bxname" :value="item.fid"></el-option>
           </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="fngtype" align="center" label="NG甩线类型" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fngtype"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fresidtime" align="center" label="存放时间" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fresidtime"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="frefreshtime" align="center" label="嵌入式刷新时间" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.frefreshtime"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="ftuopanqty" align="center"label="测试托盘数量" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ftuopanqty"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="operate" align="center"label="操作" width="120">
          <template slot-scope="scope">
<!--            <el-button size="mini" type="primary" @click = addnewrow()><i class="el-icon-edit" />添加</el-button>-->
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index)" ><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
			<div slot="footer" class="dialog-footer">
				<el-button :size="size" :loading="loading" type="primary" @click="submit" >
					<span v-if="!loading">{{$t('system.confirm')}}</span>
					<span v-else>{{$t('system.submitting')}}</span>
				</el-button>
				<el-button :size="size" @click="closeForm">{{$t('system.cancel')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { add} from '@/api/app/vswave'
import {wenduList} from "@/api/app/wendu";
import {getBoXingByKey,getBoXingList} from "@/api/app/boxing";
import {getTuPianList} from "@/api/app/tupian";
import ImagesUpload from '@/components/common/ImagesUpload.vue'

export default {
	name:'vswaveadd',
	components: {
	   		ImagesUpload,
	   	   
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: 'small'
		},
		querys:{
			type:Object,
		},
	},
	data(){
		return {
		    dialog:{
			},
			
			form: {
			   fnumber:'',
			   fname:'',
			   fworkorder:'',
			   fvcom:'',
			   fpicture:[],
			   fnote:'',
			},
		    initial:{},   
			loading:false,
			rules: {
			},
      list:[{
        fnumber:'',
        fseq:'',
        femperature :'',
        fdianya:'',
        fboxing:'',
        fngtype:'',
        fresidtime:'',
        frefreshtime:'',
        ftuopanqty:'',
      }],
      wendulist:[],
      boXingList:[],
      imageDialog:false,
      fileList:[],
      chooseUrl:''
		}
	},
	watch:{
		show(val){
			if(val){
			}
		}
	},
	methods: {
    // selectImage(){
    //   let that = this
    //   this.fileList.forEach((item,index) => {
    //     if (item.url === this.chooseUrl){
    //       that.form.fpicture = item.fid
    //     }
    //   })
    //  this.imageDialog = false
    // },
    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    // handlePreview(file) {
    //   this.chooseUrl = file.url
    // },

    getFileList(){
      getTuPianList({}).then(res =>{
        this.fileList = res.data.data
      })
    },
    //打开图片选择框
    changeImage(){
      this.imageDialog = true
    },
    boXingListIndex(){
      getBoXingList({}).then(res => {
        this.boXingList = res.data.data
      })
    },
    //获取波形的结合
    getBoXingList(val){
      if (!val){
        this.boXingList = []
        return
      }
      getBoXingByKey({key : val,pageSize : 20}).then(res =>{
        this.boXingList = res.data.data.records
      })
    },
		open(){
		  if(this.querys){
		  }
		},
    addnewrow(){
      // 向列表中添加一个空对象，用于新增行的编辑
      this.list.push({
      });
    },
    //删除行
    handleDelete(index) {
      this.list.splice(index, 1);
    },
		submit(){
      console.log(this.list)
			this.$refs['form'].validate(valid => {
				if(valid) {
					this.loading = true
          add({header:this.form ,dataList:this.list}).then(res => {
						if(res.status == 200){
							this.$message({message: this.$t('system.success'), type: 'success'})
							this.$emit('refresh_list')
							this.closeForm()
						}
					}).catch(()=>{
						this.loading = false
					})
				}
			})
		},
    getWenduName(val){
      if (this.wendulist && this.wendulist.length > 0) {
        for (let i = 0; i < this.wendulist.length; i++) {
          if (this.wendulist[i].femperature === val) {
            return this.wendulist[i].femperature;
          }
        }
      }
    },
    getWenduList(){
      wenduList().then(res => {
        this.wendulist = res.data
      })
    },
		closeForm(){
			this.$emit('update:show', false)
			this.loading = false
			if (this.$refs['form']!==undefined) {
				this.$refs['form'].resetFields()
			}
		},
	},
  mounted(){
    this.getWenduList()
    this.boXingListIndex()
    this.getFileList()
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/common.scss';
</style>
